<template>
  <div class="player-container">
    <div class="music-cover"></div>
    <div class="active disk">
      <div class="disk-cover"></div>
    </div>
    <div class="disk-back"></div>
    <div class="song-name">
      <p>{{ isPlay.name }}</p>
    </div>
    <div class="player-name">
      <p>{{ isPlay.player }}</p>
    </div>
    <!-- 对应控件 -->
    <div class="control">
      <!-- 进度条组件 -->
      <div class="progress">
        <input
          type="range"
          class="music-bar"
          v-model="bar"
          @input="handleChange()"
          @timeupdate="handleProgress()"
          :style="{
            background:
              '-webkit-linear-gradient(#444, #444) 0% 0% / ' +
              bar +
              '% 100% no-repeat',
          }"
        />
      </div>
      <!-- 基础控件 -->
      <div class="prev con pre" @click="handlePrev()">
        <img src="../../assets/music/上一首.svg" alt="上一首" />
      </div>
      <div @click="handlePlay()" class="main con mid">
        <img v-if="!isPlay.play" src="../../assets/music/播放.svg" alt="暂停" />
        <img v-if="isPlay.play" src="../../assets/music/暂停.svg" alt="播放" />
      </div>
      <div class="next con next" @click="handleNext()">
        <img src="../../assets/music/下一首.svg" alt="下一首" />
      </div>
      <div class="loop con" @click="handleLoop()">
        <img
          v-if="!loop"
          src="../../assets/music/单曲循环关闭.svg"
          alt="单曲循环关闭"
        />
        <img
          v-if="loop"
          src="../../assets/music/单曲循环开启.svg"
          alt="单曲循环开启"
        />
      </div>
      <div v-show="soundShow" class="sound-controller">
        <input
          type="range"
          orient="vertical"
          v-model="sound"
          @input="handleChangeSound()"
        />
      </div>
      <div class="sound con" @click="soundShow = !soundShow">
        <img src="../../assets/music/声音.svg" alt="声音" />
      </div>
    </div>
  </div>
</template>

<script>
import Controller from "./controller";
export default {
  name: "Player",
  data() {
    return {
      controller: "",
      music_list: [],
      music_picture: [],
      sing_name: [],
      singer_name: [],
      isPlay: {
        play: false,
        name: "",
        player: "",
      },
      timer: "",
      rate: 0,
      bar: 0,
      loop: false,
      sound: 50,
      soundShow: false,
    };
  },
  mounted() {
    this.bar = 0;
    this.music_list = [
      require("../../assets/music/さユり - 夜明けの詩.mp3"),
      require("../../assets/music/ヨルシカ - 夜行.mp3"),
    ];
    this.singer_name = ["佚名", "佚名"];
    this.sing_name = ["さユり - 夜明けの詩", "ヨルシカ - 夜行"];
    this.music_picture = [
      require("../../assets/music/さユり - 夜明けの詩.jpg"),
      require("../../assets/music/ヨルシカ - 夜行.jpg"),
    ];
    this.controller = new Controller(this.music_list);
    this.sound = this.controller.getVolume();
    this.handleInit(0);
  },
  methods: {
    // 定时器
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          if (this.bar > 99 && !this.loop) {
            this.handleNext();
          }
          this.rate = this.controller.scale();
          this.handleProgress();
        }, 1500);
      }
    },
    // 改变音量
    handleChangeSound() {
      if (this.sound === "0") {
        this.controller.mute();
      } else {
        this.controller.clearMute();
        this.controller.setVolume(parseInt(this.sound) / 100);
      }
    },
    // 单曲循环
    handleLoop() {
      this.loop = !this.loop;
      this.controller.isLoop(this.loop);
    },
    // 初始化歌曲信息
    handleInit(index) {
      // 重置进度条
      this.bar = 0;
      this.handleChangeSound();
      // 初始化歌名 歌手 封面
      this.isPlay.name = this.sing_name[index];
      this.isPlay.player = this.singer_name[index];
      document.querySelector(
        ".disk"
      ).style.backgroundImage = `url('${this.music_picture[index]}')`;
      // 初始封面静止
      document.querySelector(".disk").classList.remove("active");
      document.querySelector(".disk").classList.add("paused");
    },
    // 跟随播放
    handleProgress() {
      let location = this.rate * 100;
      this.bar = location;
    },
    // 点击进度条
    handleChange() {
      let location = this.bar / 100;
      // 获取进度条歌曲对应时间
      let music_stamp = location * this.controller.duration();
      this.controller.setSeek(music_stamp);
      this.setTimer();
    },
    // 点击播放
    handlePlay() {
      if (!this.isPlay.play) {
        this.truePlay();
      } else {
        this.truePause();
      }
    },
    // 播放
    truePlay() {
      this.setTimer();
      this.isPlay.play = true;
      this.controller.play();
      document.querySelector(".disk").classList.remove("paused");
      document.querySelector(".disk").classList.add("active");
    },
    // 暂停
    truePause() {
      clearInterval(this.timer);
      this.timer = null;
      this.isPlay.play = false;
      this.controller.pause();
      document.querySelector(".disk").classList.remove("active");
      document.querySelector(".disk").classList.add("paused");
    },
    // 上一首
    handlePrev() {
      var index = this.controller.pre();
      this.handleInit(index);
      document.querySelector(".disk").classList.remove("active");
      document.querySelector(".disk").classList.add("paused");
      this.truePlay();
    },
    // 下一首
    handleNext() {
      var index = this.controller.next();
      this.handleInit(index);
      document.querySelector(".disk").classList.remove("active");
      document.querySelector(".disk").classList.add("paused");
      this.truePlay();
    },
  },
  created() {
    clearInterval(this.timer);
    this.timer = null;
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
@keyframes changeright {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
.player-container {
  .music-cover {
    position: absolute;
    left: 300px;
    top: 0px;
    width: 20px;
    height: 500px;
    z-index: -1;
    opacity: 0;
  }
  .song-name {
    position: absolute;
    top: 285px;
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 20px;
    p {
      align-self: center;
      line-height: 20px;
      font-size: 20px;
    }
  }
  .player-name {
    position: absolute;
    top: 310px;
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 20px;
    p {
      align-self: center;
      line-height: 20px;
      font-size: 17px;
    }
  }
  position: relative;
  display: flex;
  max-width: 350px;
  max-height: 430px;
  width: 300px;
  height: 500px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 20px 20px rgba(29, 15, 31, 0.2);
  .active {
    animation: changeright 10s linear infinite;
    animation-play-state: running;
  }
  .paused {
    animation: changeright 10s linear infinite;
    animation-play-state: paused;
  }
  .disk-back {
    content: "";
    position: absolute;
    top: 14%;
    left: 17%;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: #3b4547;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  .disk {
    z-index: 2;
    position: absolute;
    top: 78px;
    left: 69px;
    width: 165px;
    height: 165px;
    border-radius: 100%;
    background-image: radial-gradient(circle, #444 0%, #333 90%);
    background-size: 100%;
    .disk-cover {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -13px;
      margin-top: -13px;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      background: #3b4547;
      box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    }
  }
  .control {
    display: flex;
    position: relative;
    top: 360px;
    left: 70px;
    height: 40px;
    width: 180px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .progress {
      $bar-left: 0px;
      position: absolute;
      top: -12px;
      left: -35px;
      .music-bar {
        display: block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        position: relative;
        top: -10px;
        left: 0px;
        width: 230px;
        height: 5px;
        border-radius: 20px;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        transition: 0.2s;
        z-index: 21;
        position: relative;
        top: 5px;
        height: 10px;
        width: 10px;
        left: $bar-left;
        margin-top: -9px; /*使滑块超出轨道部分的偏移量相等*/
        margin-left: 0px;
        background: #ffffff;
        border-radius: 50%; /*外观设置为圆形*/
        border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
        box-shadow: 0 0.125em 0.125em #3b4547; /*添加底部阴影*/
        &:hover {
          background: #444;
          transition: 0.2s;
        }
      }
      input[type="range"]::-webkit-slider-runnable-track {
        z-index: 19;
        height: 5px;
        border-radius: 20px;
        box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
      }
      input[type="range"]:focus {
        outline: none;
      }
    }
    @mixin common {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 5px;
      img {
        position: relative;
      }
    }
    .pre {
      left: -4px;
      @include common();
      img {
        top: 8px;
        left: 8px;
      }
    }
    .next {
      left: 125px;
      @include common();
      img {
        position: relative;
        top: 8px;
        left: 11px;
      }
    }
    .mid {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0px;
      left: 56px;
      img {
        position: relative;
        top: 11px;
        left: 15px;
      }
    }
    .loop {
      position: absolute;
      top: 15px;
      left: -40px;
      width: 30px;
      height: 30px;
      img {
        position: relative;
        top: 3px;
        left: 5px;
      }
    }
    .sound-controller {
      position: absolute;
      width: 20px;
      height: 80px;
      top: -67px;
      left: 177px;
      z-index: 22;
      border-radius: 50px;
      background: #e0e0e0;
      box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
      input {
        position: absolute;
        top: 33px;
        left: -26px;
        width: 73px;
        transform: rotate(-90deg);
      }
    }
    .sound {
      position: absolute;
      top: 15px;
      left: 172px;
      width: 30px;
      height: 30px;
      img {
        position: relative;
        top: 3px;
        left: 5px;
      }
    }
    .con {
      border-radius: 50px;
      background: linear-gradient(145deg, #ffffff, #dfdede);
      box-shadow: 5px 5px 10px #d3d2d2, -5px -5px 10px #ffffff;
      &:hover {
        border-radius: 50px;
        background: linear-gradient(145deg, #dfdede, #ffffff);
        box-shadow: 5px 5px 10px #d3d2d2, -5px -5px 10px #ffffff;
        transition: 0.7s;
      }
    }
  }
}
</style>